import React from 'react';
import { SearchBar, NavBar, Popover, Button } from 'antd-mobile';
import ico_baobao from './static/ico_baobao.svg';
import ico_avatar from './static/ico_avatar.svg';
import * as request from './request';

const Item = Popover.Item;
const apiURL = "/api/services/app/Edu_Children/GetList?SkipCount=0&MaxResultCount=10&memberId=";
const apiURLMb = "/api/services/app/Members/Get?id=";
class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            selected: {}
        }
    }
    componentDidMount() {
        var memberId = localStorage.getItem('memberId');
        if (!memberId) {
            this.props.state.history.push('/Login');
        }
        else {
            request.get(apiURLMb + memberId)
                .then((data) => {
                    var currentUser = data.result;
                    this.props.state.dispatch({
                        type: "setCurrUser",
                        data: currentUser,
                    })
                    request.get(apiURL + memberId)
                        .then((data) => {
                            if (currentUser) {
                                currentUser.childs = data.result.items
                                this.props.state.dispatch({
                                    type: "setCurrUser",
                                    data: currentUser,
                                })
                            }
                        })
                })
        }
    }

    onSelect = (opt) => {
        this.setState({
            visible: false,
            selected: opt.props.value,
        });
        this.props.state.dispatch({
            type: "setCurrChild",
            data: opt.props.value,
        })
        this.props.selectBaby(opt.props.value)
        localStorage.setItem('childid', opt.props.value.id)
    };
    handleVisibleChange = (visible) => {
        this.setState({
            visible,
        });
    };
    render() {
        const currentUser = this.props.state.currentUser;
        const currentChild = this.props.state.currentChild;
        const { selected } = this.state;
        const popu = () => {
            return (
                <Popover
                    key="3"
                    mask
                    overlayClassName="fortest"
                    overlayStyle={{ color: 'currentColor' }}
                    visible={this.state.visible}
                    overlay={
                        currentUser && currentUser.childs ? currentUser.childs.map((item, i) => {
                            return (<Item key={i} value={item} data-seed="logId">{item.name}</Item>)
                        }) : null
                    }
                    align={{
                        overflow: { adjustY: 0, adjustX: 0 },
                        offset: [-10, 0],
                    }}
                    onVisibleChange={this.handleVisibleChange}
                    onSelect={this.onSelect}>
                    <div style={{ width: 100 }}>
                        <Button icon={<img style={{ width: 24, height: 24, }} src={ico_baobao} />} inline size="small">{currentChild ? currentChild.name : '选择宝宝'}</Button>
                    </div>
                </Popover>
            )
        }

        return (


            <NavBar
                mode="light"
                icon={<img style={{ width: 24, height: 24, borderRadius: 50 }} src={currentUser ? request.imgServer + currentUser.avatar : ico_avatar} />}
                onLeftClick={() => this.props.state.history.push('/My/')}
                rightContent={[
                    popu(),
                ]}
            >
                {/* <SearchBar
                    placeholder="有问题求助我~"
                    onSubmit={value => console.log(value, 'onSubmit')}
                    onClear={value => console.log(value, 'onClear')}
                    onFocus={() => console.log('onFocus')}
                    onBlur={() => console.log('onBlur')}
                    onCancel={() => console.log('onCancel')}
                    showCancelButton={false}
                    cancelText="×"
                    style={{ width: '200px', backgroundColor: 'transparent' }}
                /> */}
            </NavBar>

        )
    };
}

export default Header;
